<template>
  <div class="registerDetail">
    <div class="task_header">
      <div class="top_title">
        <div class="top_title_back" @click="onClickLeft">
          <i class="iconfont icon-back"></i>
        </div>
        <div class="top_title_val">{{ $route.meta.title }}</div>
      </div>
    </div>
    <div class="vip_detail">
      <div class="curInfo">
<!--        <div class="curInfo_title">当前绑定车辆</div>-->
        <div class="tableData pb0" v-if="bindInfoList && bindInfoList.length != 0">
          <div style="font-size: 12px;text-align: right;margin-bottom: 8px;color: #86909c;"><van-icon name="info-o"/>点击车架号可查询对应车辆信息</div>
          <div class="tableDatabox">
            <table>
              <tr>
                <th>手机号</th>
                <th>车架号</th>
                <th>车牌号</th>
                <th>绑定结果</th>
                <th>绑定时间</th>
              </tr>
              <tbody v-if="bindInfoList && bindInfoList.length != 0">
              <tr v-for="(item, index) in bindInfoList" :key="index">
                <td style="word-break: break-all;white-space: normal;max-width: 200px;font-size: 12px;line-height: 14px;">{{ item.mobile }}</td>
                <td style="word-break: break-all;white-space: normal;max-width: 200px;font-size: 12px;line-height: 14px;color: #409EFF;text-decoration: underline;" @click="getCarInfo(item.vincode)">{{ item.vincode }}</td>
                <td style="word-break: break-all;white-space: normal;max-width: 200px;font-size: 12px;line-height: 14px;">{{ item.plateNumber }}</td>
                <td style="word-break: break-all;white-space: normal;max-width: 200px;font-size: 12px;line-height: 14px;">{{ item.bindingResultName }}</td>
                <td style="word-break: break-word;white-space: normal;max-width: 200px;font-size: 12px;line-height: 14px;">{{ item.bindingTime }}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="no_icon" v-else>
          <img class="no_icon_img" src="@/assets/images/no_icon.png" />
          <div class="no_icon_txt">暂无内容</div>
        </div>
      </div>

      <van-dialog title="车辆信息" v-model="carInfoShow">
        <div>
          <div style="margin: 12px">
            <div style="line-height: 20px;font-size: 14px;font-weight: 600;">{{carInfo.carNo ? carInfo.carNo : '-'}}</div>
            <div style="line-height: 20px;font-size: 14px">{{carInfo.vinCode ? carInfo.vinCode : '-'}}</div>
          </div>
          <div>
            <div class="contact_item">
              <div class="contact_top">
                <div class="item_label" style="width: 100%;text-align: center;">车主信息</div>
              </div>
              <div class="contact_bottom">
                <div class="item_name">
                  <div class="txt1">姓名：</div>
                  <div class="txt2">{{ carInfo.ownerName ? carInfo.ownerName : '-' }}</div>
                </div>
              </div>
              <div class="contact_bottom">
                <div class="item_name">
                  <div class="txt1">电话：</div>
                  <div class="txt2">{{ carInfo.ownerPhone ? carInfo.ownerPhone : '-' }}</div>
                </div>
              </div>
            </div>
            <div class="contact_item">
              <div class="contact_top">
                <div class="item_label" style="width: 100%;text-align: center;">送修人信息</div>
              </div>
              <div class="contact_bottom">
                <div class="item_name">
                  <div class="txt1">姓名：</div>
                  <div class="txt2">{{ carInfo.contactPeople ? carInfo.contactPeople : '-' }}</div>
                </div>
              </div>
              <div class="contact_bottom">
                <div class="item_name">
                  <div class="txt1">电话：</div>
                  <div class="txt2">{{ carInfo.contactPhone ? carInfo.contactPhone : '-' }}</div>
                </div>
              </div>
            </div>
          </div>

        </div>

      </van-dialog>

    </div>
  </div>
</template>

<script>
import { Notify, Toast } from 'vant'
import vipInfoApi from '@/api/vipInfoApi'
import carApi from '../../../api/carApi'

export default {
  name: 'detail',
  components: { Toast },
  data() {
    return {
      requestParams: {},
      bindInfoList: [],
      carInfoShow: false,
      carInfo: {},
    }
  },

  mounted() {
    this.requestParams = this.$route.query.params
    this.getDetail()
  },
  methods: {
    getDetail() {
      Toast.loading('加载中...')
      vipInfoApi.queryMemberCarBindingDetail(this.requestParams).then((res) => {
        Toast.clear()
        if (res.code == 1) {
          if (res.data && res.data.length > 0) {
            this.bindInfoList = res.data
          }
        }
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    getCarInfo(vin) {
      this.carInfo = {}
      if (!vin) {
        return
      }
      Toast.loading({
        message: '查询中...',
        forbidClick: true,
        overlay: true
      })
      carApi.getCarInfoList({ codeNo: vin, pageNo: 1 }).then(res => {
        Toast.clear()
        if (res.data == null || (res.data && res.data.length === 0)) {
          Notify({ type: 'danger', message: '该车架号在金蝶系统查无车辆信息!' })
        } else {
          this.carInfoShow = true
          this.carInfo = res.data[0]
        }
      }).catch(()=>{
        Toast.clear()
      })
    }
  },
}
</script>

<style lang="less" scoped>
.task_header {
  background: url('~@/assets/images/title_bg.png') no-repeat center;
  font-size: 0.24rem;
  height: 45px;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;

  .top_title {
    position: relative;
    width: 100%;
    height: 50px;

    .top_title_back {
      position: absolute;
      left: 10px;
      line-height: 50px;
      color: #fff;
    }

    .top_title_val {
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
    }
    .task_transbox {
      position: absolute;
      right: 10px;
      top: 20px;
      color: #fff;
      z-index: 10;
      font-weight: 400;
      font-size: 12px;
      text-align: center;
      .task_trans {
        width: 24px;
        display: block;
        margin: auto;
      }
    }
  }

  .task_header_data {
    .task_header_date {
      margin-bottom: 10px;
      display: flex;
      align-items: center;

      .task_header_date_w {
        width: 12.5%;
      }

      .task_header_date_item {
        width: 12.5%;
        text-align: center;
        color: #fff;
        font-size: 14px;
      }
    }

    .task_header_followData {
      display: flex;
      align-items: center;
      color: #fff;
      margin-bottom: 10px;

      .task_header_followData_tt {
        width: 12.5%;
        text-align: center;
      }

      .task_header_followData_item {
        width: 12.5%;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
}
.vip_detail {
  padding-top: 50px;
  .curInfo {
    .curInfo_title {
      margin-top: 20px;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      position: relative;
      &::before {
        content: '';
        background: #ccc;
        width: 100px;
        height: 1px;
        position: absolute;
        left: 20px;
        top: 6px;
      }
      &::after {
        content: '';
        background: #ccc;
        width: 100px;
        height: 1px;
        position: absolute;
        right: 20px;
        top: 6px;
      }
    }
    .cur_list {
      margin-top: 20px;
      .cur_item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .cur_index {
          font-size: 16px;
          text-align: center;
          width: 40px;
        }
        .cur_content {
          background: #f7f7f7;
          width: 300px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          padding: 10px;
          border-radius: 5px;
          .cur_box {
            width: 50%;
            margin-bottom: 15px;
            .cur_label {
              text-align: center;
              font-size: 14px;
              margin-bottom: 10px;
              color: #999;
            }
            .cur_val {
              text-align: center;
              font-size: 14px;
              font-weight: bold;
              color: #333;
            }
          }
        }
      }
    }
  }
}
.mb0 {
  margin-bottom: 0 !important;
}
.tableData {
  margin: 0 16px;
  // height: 500px;
  border-collapse: collapse;
  text-align: center;
  // height: auto; /* 自动计算高度 */
  border-radius: 2px;
  overflow-x: hidden;
  margin-top: 20px;
  padding-bottom: 50px;

  .tableDatabox {
    // overflow-x: scroll;
  }

  table {
    // min-width: 800px;
    font-size: 10px;
    border: none;
    width: 100%;
    table-layout: fixed;
  }
  .last_item td {
    font-weight: bold;
  }

  .tab_item {
    background: #3975c6;
  }
  tr > td:first-child {
    // position: sticky;
    // left: 0;
    // z-index: 1;
    // background: #3975c6;
    // color: #fff;
  }
  tr > th:first-child {
    // position: sticky;
    // left: 0;
    // z-index: 1;
    // background: #286bc2;
    // color: #fff;
  }

  tr {
    th {
      position: sticky; /* 将表头固定在位置 */
      top: 0; /* 与容器顶部对齐 */
      font-size: 12px;
      border: 1px solid #6da0e4;
      padding: 10px 0;
      background: #286bc2;
      color: #fff;
      font-weight: bold;
    }
    td {
      padding: 5px 0;
      border: 1px solid #6da0e4;
      color: #333;
      font-size: 10px;
    }
  }
}

/deep/ .van-tabs__wrap {
  // box-shadow: 0 3px 6px -2px gray;
  border-bottom: 1px solid #e9e9e9;
}
.pb0 {
  padding-bottom: 0 !important;
}
.no_icon {
  padding: 25px;
  padding-top: 50px;
  background: #fff;
  .no_icon_img {
    width: 70px;
    display: block;
    margin: auto;
  }
  .no_icon_txt {
    font-weight: 400;
    font-size: 14px;
    color: #86909c;
    text-align: center;
    margin-top: 10px;
  }
}

.contact_item {
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.02);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #86909c;
  //padding: 12px 10px 12px 10px;
  margin: 0 12px 10px;

  .contact_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 6px;

    .item_label {
      font-weight: 700;
      font-size: 12px;
      color: #165dff;
      background: #e8f5ff;
      border-radius: 2px 2px 2px 2px;
      padding: 4px 5px;
    }

  }

  .contact_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //padding-left: 4px;
    padding: 0 12px 6px;

    .item_name {
      display: flex;

      .txt1 {
        font-weight: 400;
        font-size: 12px;
        color: #86909c;
      }

      .txt2 {
        font-weight: 700;
        font-size: 12px;
        color: #2f2f2f;
      }
    }
  }
}

</style>
